<template>
  <d-drawer
    size="760px"
    class="leader-add-drawer"
    :api="api"
    :header="formData.isEdit ? '编辑管理员' : '新增管理员'"
    v-model:visible="visible"
    v-model:data="formData"
    :rules="rules"
    :handleParams="handleParams"
  >
    <t-form-item label-width="150px" label="姓名" name="name">
      <t-input
        class="input-title"
        clearable
        :maxlength="30"
        v-model="formData.name"
        placeholder="请输入姓名"
      ></t-input>
    </t-form-item>
    <t-form-item label-width="150px" label="电话" name="phoneNumber">
      <t-input
        class="input-title"
        clearable
        :maxlength="11"
        v-model="formData.phoneNumber"
        placeholder="请输入电话"
      ></t-input>
    </t-form-item>
  </d-drawer>
</template>

<script setup>
import { ref, computed } from 'vue'
import { get } from '@common'
const api = 'basic/adminUser'
const INIT_STATUS = {
  id: '',
  name: '',
  phoneNumber: ''
}
const visible = ref(false)
const formData = ref({ ...INIT_STATUS })
const rules = computed(() => {
  return {
    name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
    phoneNumber: [{ required: true, message: '请输入电话号码', trigger: 'blur' }]
  }
})

const show = async (info = {}) => {
  if (info?.id) {
    const res = await get(`${api}/${info.id}`)
    let dataObj = {
      ...res.data,
      isEdit: true
    }
    formData.value = dataObj
  } else {
    formData.value = { ...INIT_STATUS }
  }
  visible.value = true
}
const handleParams = (params) => {
  return {
    ...params
  }
}

defineExpose({ show })
</script>
<style lang="less">
.leader-add-drawer {
  .input-title {
    width: 400px;
  }

  .input-row-title {
    width: 120px;
    margin-right: 5px;
  }

  .remark-title {
    color: #999;
    font-size: 12px;

    &.require {
      margin: 20px 0 0 150px;
    }
  }

  .radio-title {
    width: 100px;
    display: inline-block;
  }
  .hideInput {
    .t-input__inner {
      opacity: 0;
    }
  }
}
</style>
